<template>
  <div class="search-popup">
    <van-search
      v-model="searchVal"
      show-action
      :placeholder="placeholderVal"
      @search="onSearch"
      @cancel="onCancel"
      @input="onInput"
    />

    <!-- 在这个弹出层中，将来肯能展示3种界面中的一种。 我们可以写成3个组件 -->
    <HistoryHot 
        v-if="blockShow == 1" 
        :historyKeywordList="historyKeywordList"
        :hotKeywordList="hotKeywordList"
        @tagClick="tagClick"
    ></HistoryHot>
    <SearchTipsList 
        v-else-if="blockShow == 2"
        :searchTipsList="searchTipsList"
        @tagClick="tagClick"
    ></SearchTipsList>
    <SearchProducts 
      v-else-if="blockShow == 3"
      :goodsList="goodsList"
      :filterCategory="filterCategory"
      @categoryChangeSearch="categoryChangeSearch"
      @priceChangeSearch="priceChangeSearch"
    ></SearchProducts>
  </div>
</template>

<script>
import HistoryHot from "@/components/searchPopup/HistoryHot";
import SearchTipsList from "@/components/searchPopup/SearchTipsList";
import SearchProducts from "@/components/searchPopup/SearchProducts";
import {GetSearchPopupData, GetSearchTipsListData,GetSearchData} from "@/request/api";
import {mapMutations} from "vuex";
export default {
  components: {
    HistoryHot,
    SearchTipsList,
    SearchProducts,
  },
  data() {
    return {
        // 搜索框的v-model值
        searchVal: "",
        // 搜索框的placeholder值
        placeholderVal: "",
        // blockShow用来决定将来弹出层展示的是哪个界面
        // blockShow为1 则表示  展示历史和热门界面
        // blockShow为2 则表示  展示提示列表界面
        // blockShow为3 则表示  展示商品列表界面
        blockShow: 1,
        // 历史记录数组
        historyKeywordList:[],
        // 热门搜索数组
        hotKeywordList:[],
        // 搜索提示数组
        searchTipsList:[],
        // 搜索产品的列表数组
        goodsList:[],
        // 搜索产品时候的分类数组
        filterCategory:[],

        // 以下3个变量都是搜索时候带的参数
        // 价格由高到低（"desc"）或者由低到高（"asc"）排序
        order:"desc",
        // 分类id
        categoryId:0,
        // 排序的方式  ，可以是id或price
        sort: "id"

    };
  },
  created(){
      // console.log("弹出层created");
      // 发送请求，请求搜索页的数据(历史记录、热门搜索)
      // 等到滑动的动画结束之后，再执行请求
      setTimeout(()=>{
        GetSearchPopupData().then(res=>{
    
              this.placeholderVal = res.data.defaultKeyword.keyword
              let {historyKeywordList, hotKeywordList} = res.data
              // console.log(historyKeywordList, hotKeywordList);    
              this.historyKeywordList = historyKeywordList;
              this.hotKeywordList = hotKeywordList;
            
              
          })  
      },400)
        
  },
  methods:{
    ...mapMutations({
      changeIsShowPopupShadow:"isShowPopupShadow/changeIsShowPopupShadow"
    }),
    tagClick(val){
      console.log("tagClick执行");
      this.searchVal = val
      this.onSearch(this.searchVal);
    },
    priceChangeSearch(value){
      this.sort = "price";
      this.order = value
      this.onSearch(this.searchVal);
    },
    categoryChangeSearch(id){
      this.categoryId = id
      this.onSearch(this.searchVal);
    },
    onInput(value){
        // 把界面改成2
        this.blockShow = 2
        // console.log(value);  // 用户输入的信息

        // 发起请求，请求输入的提示列表的数据
        GetSearchTipsListData({
            keyword:value
        }).then(res=>{
            // console.log(res);
            this.searchTipsList = res.data
        })
    },
    onSearch(value) {
        // 切换到第3个界面
        this.blockShow = 3;
        // console.log("确定搜索", value);

        // 发送搜索商品的请求
        GetSearchData({
          // 用户输入的信息
          keyword:value,
          // 显示页数
          page:1,
          // 每页显示的条数
          size:20,
          // 价格由高到低（"desc"）或者由低到高（"asc"）排序
          order:this.order,
          // 分类id
          categoryId:this.categoryId,
          // 排序的方式  ，可以是id或price
          sort: this.sort
        }).then(res=>{
            // console.log(res);
            let {goodsList,filterCategory} = res.data
            this.goodsList = goodsList

            // 对filterCategory数据进行加工处理
            // [{id: 0, name: "全部", checked: true}, {id: 1005000, name: "居家", checked: false}]
            // 处理成： [{ text: '全部', value: 0 },{ text: '居家', value: 1005000 }]
            let newArr = JSON.parse(JSON.stringify(filterCategory).replace(/name/g, 'text').replace(/id/g, 'value'));
            this.filterCategory = newArr
        })
    },
    onCancel() {
      this.$router.go(-1);
      this.changeIsShowPopupShadow(false);
    },
  },
};
</script>
 
<style lang = "less" scoped>
.search-popup {
  background-color: #efefef;
  width: 100%;
  height: 100%;
  position: absolute;
  /* right: 0; */
  top: 0;
  z-index: 9;
}
</style>